<template>
	<view>
		<!-- 头部导航 -->
		<view class="tabbbar">
		  <text class="quxiaojiantou"> 取消</text>
		  <text class="tabtext">修改昵称</text>
      <text class="baocun">保存</text>
		</view>
    <!-- 名称输入框 -->
    <view class="inusername">
      <text>昵称：</text>
      <input type="text" value=""  placeholder="请设置你的昵称" />
    </view>
   
   <!-- 文字提示 -->
   <view class="wenzi">
     <text>限2~12个中文、英文或数字。</text>
   </view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			
		}
	}
</script>

<style>
 /* tabbar */
.tabbbar {
  width: 100%;
  height: 116rpx;
  background: linear-gradient(90deg, #C8F979 13%, #E6FAC5 45%, #DAFBA7 75%, #9CD14C 100%);
  opacity: 0.3;
  

}
.quxiaojiantou {
  font-family: PingFang SC;
  font-weight: bold;
  color: #333333;
      line-height: 114rpx;
      margin-left: 37rpx;
}
.tabtext {
  width: 70rpx;
  height: 34rpx;
  font-size: 36rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #333333;
  line-height: 30rpx;

 margin-left: 100rpx;
}
.baocun{
 
  font-size: 36rpx;
  font-family: PingFang SC;
  font-weight: bold;
  color: #8DCE2A;
  line-height: 114rpx;
  float: right;
  margin-right: 36rpx;
  }
  /* 修改框 */
  .inusername {
    display: flex;
   justify:center; 
   align-items:center;
  
    width: 690rpx;
    height: 109rpx;
    background: #F5F5F5;
    border-radius: 20rpx;
    margin: 24rpx 30rpx;

  }
   .inusername text {
     padding-left: 55rpx;
   }
 .wenzi text {
   width: 303rpx;
   height: 23rpx;
   font-size: 24rpx;
   font-family: PingFang SC;
   font-weight: 500;
   color: #AAAAAA;
   line-height: 40rpx;
   margin-left: 86rpx;

 }
</style>
